import * as THREE from 'three';
import drawpoint from './drawpoint'
import imageLoad from './imageLoad'
//import MrgData from '../../MrgData';
class drawcanvas {
   
    constructor (params) { 
      this.mesh = params.mesh;
      this.data = params.data;
     // this.node = params.node;
      this.dcanvas = params.dcanvas;
      this.parent = params.parent;
      this.init()
    }
    createCanvas () {
      const canvas = document.createElement('canvas');
      canvas.width = this.originalImage.width;
      canvas.height = this.originalImage.height;

      canvas.style.width = this.originalImage.width + 'px'
      canvas.style.height = this.originalImage.height + 'px'
      this.canvas = canvas;
      this.drawImage ()

      this.texture = new THREE.CanvasTexture(this.canvas);
      this.texture.flipY = false; // 正确设置 flipY
      // this.drawLabels(canvas, options);
    }

    getModelPosition (model) {
      const worldPosition = new THREE.Vector3();
      model.getWorldPosition(worldPosition);
      console.log('模型世界位置:', worldPosition.x, worldPosition.y, worldPosition.z);
      return worldPosition
    }

    addMarker(position, color){
        // 创建一个半径为0.2，分段数为16的圆滑球体
        const markerGeometry = new THREE.SphereGeometry(5, 16, 16);
        const markerMaterial = new THREE.MeshBasicMaterial({ color });
        const marker = new THREE.Mesh(markerGeometry, markerMaterial);
        marker.position.copy(position);
        MrgData.threeMrg.scene.add(marker);
        console.log(`终点标记已添加: (${position.x}, ${position.y}, ${position.z})`);
    }

    
    async drawImage () {
      console.log("this.originalImage:", this.originalImage)
     // let idata = await imageLoad('/v1/object/1607')
      let fillStyle = 'rgba(255, 0, 0, 0)'
       let backgroundColor = 'transparent'
      const ctx = this.canvas.getContext('2d');
      ctx.clearRect(0, 0, this.originalImage.width, this.originalImage.height);
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, this.originalImage.width, this.originalImage.height);
      ctx.drawImage(this.originalImage, 0, 0, this.originalImage.width, this.originalImage.height);
      //ctx.drawImage(idata.img, 0, 0, this.originalImage.width, this.originalImage.height);
    /* let pos = this.getModelPosition(this.parent)
      pos.y = pos.y + 100
      console.log("model 世界坐标:", pos)
      //debugger
      */
      // this.addMarker(pos)
      new drawpoint({
        canvas:this.canvas,
        data:this.data,
        parent:this.parent,
        dcanvas:this.dcanvas,
        mesh:this.mesh,
        threePoints: [
          // new THREE.Vector3(400, 300, 100)
        
        ]
      })

     setInterval(()=>{
      this.mesh.needsUpdate = true;
      this.texture.needsUpdate = true;
      
     }, 1000)
    
      this.mesh.needsUpdate = true;
    }

    init () {
      this.originalImage = this.mesh.material.map.image
      this.createCanvas()
      this.mesh.material = new THREE.MeshBasicMaterial({ map: this.texture});
    }
}


export default drawcanvas